<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_small'"
      :title="sysBusinessProductStandard.productStandardInformation"
      align="center"
      :close-on-click-modal="false"
      :visible.sync="innerDialogFormVisible"
    >
      <el-form
        ref="formData"
        :model="formData"
        :rules="formDataRules"
        status-icon
      >
        <!-- <el-form-item
          label="产品标准编码"
          :label-width="formLabelWidth"
          prop="productStandardNum"
          :error="errorMsg.productStandardNum"
        >
          <el-input
            v-model="formData.productStandardNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>-->
        <el-form-item
          :label="sysBusinessProductStandard.productStandardName"
          :label-width="formLabelWidth"
          prop="productStandardName"
          :error="errorMsg.productStandardName"
        >
          <el-input
            v-model="formData.productStandardName"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessProductStandard.productStandardNumber"
          :label-width="formLabelWidth"
          prop="nationalStandardNum"
          :error="errorMsg.nationalStandardNum"
        >
          <el-input
            v-model="formData.nationalStandardNum"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessProductStandard.tableNumber"
          :label-width="formLabelWidth"
          prop="tableNum"
          :error="errorMsg.tableNum"
        >
          <el-input v-model="formData.tableNum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          :label="sysBusinessProductStandard.revocatoryDate"
          :label-width="formLabelWidth"
          prop="revocatoryDate"
          :error="errorMsg.revocatoryDate"
        >
          <el-date-picker
            v-model="formData.revocatoryDate"
            type="date"
            autocomplete="off"
            :placeholder="sysBusinessProductStandard.selectDate"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="base-dialog-footer">
        <el-button
          type="primary"
          :disabled="!submitLoad"
          @click="onSubmit('formData')"
          >{{ operateType.save }}</el-button
        >
        <el-button @click="cancel">{{ operateType.cancel }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  create,
  update,
} from "../../../../api/DetectionItemManage/SysBusinessProductStandard.js";
import _ from "lodash";

export default {
  name: "SysBusinessProductStandardEdit",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loading: false,
      submitLoad: true,
      innerDialogFormVisible: false,
      formLabelWidth: "120px",
      initData: {
        id: 0,
        productStandardNum: "",
        productStandardName: "",
        nationalStandardNum: "",
        tableNum: "",
        revocatoryDate: null,
      },
      formData: {
        id: 0,
        productStandardNum: "",
        productStandardName: "",
        nationalStandardNum: "",
        tableNum: "",
        revocatoryDate: null,
      },
      formDataRules: {
        // productStandardNum: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.Helper.validateFunction,
        //   },
        // ],
        // productStandardName: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.Helper.validateFunction,
        //   },
        // ],
        // nationalStandardNum: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.Helper.validateFunction,
        //   },
        // ],
        // tableNum: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.Helper.validateFunction,
        //   },
        // ],
        // revocatoryDate: [
        //   {
        //     required: true,
        //     trigger: "blur",
        //     validator: this.Helper.validateFunctionPositiveNumber,
        //   },
        // ],
      },
      initErrorMsg: {
        productStandardNum: "",
        productStandardName: "",
        nationalStandardNum: "",
        tableNum: "",
        revocatoryDate: "",
      },
      errorMsg: {
        productStandardNum: "",
        productStandardName: "",
        nationalStandardNum: "",
        tableNum: "",
        revocatoryDate: "",
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    sysBusinessProductStandard() {
      return this.$t("SysBusinessProductStandard") || {};
    },
  },
  watch: {
    dialogFormVisible(val) {
      this.innerDialogFormVisible = val;
    },
    innerDialogFormVisible(val) {
      this.$emit("update:dialogFormVisible", val);
    },
  },
  methods: {
    cancel() {
      this.innerDialogFormVisible = false;
    },
    closeDialog() {
      this.$parent.getList();
      this.cancel();
    },
    onSubmit: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        this.$refs.formData.validate((valid) => {
          if (valid) {
            this.loading = true;
            this.errorMsg = this.Helper.deepCopy(this.initErrorMsg);
            if (this.formData.id <= 0) {
              create(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitLoad = true;

                    this.closeDialog();
                  } else {
                    this.submitLoad = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.submitLoad = true;

                  this.loading = false;
                })
                .catch(() => {
                  this.submitLoad = true;

                  this.loading = false;
                });
            } else {
              update(this.formData)
                .then((res) => {
                  if (res.code === 200) {
                    this.submitLoad = true;

                    this.closeDialog();
                  } else {
                    this.submitLoad = true;

                    this.showValidateMsgCheck(res);
                  }
                  this.loading = false;
                })
                .catch(() => {
                  this.loading = false;
                  this.submitLoad = true;
                });
            }
          } else {
            this.submitLoad = true;
            return false;
          }
        });
      }
    }, 2000),
    showValidateMsgCheck(res) {
      if (res.msg) {
        this.Helper.showValidateMsg(
          "productStandardNum",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "productStandardName",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg(
          "nationalStandardNum",
          this.errorMsg,
          res.msg
        );
        this.Helper.showValidateMsg("tableNum", this.errorMsg, res.msg);
        this.Helper.showValidateMsg("revocatoryDate", this.errorMsg, res.msg);
      }
    },
  },
};
</script>
